<template>
    <el-container>
        <el-aside :width="menuWidth">
            <el-menu :collapse-transition="false"
                     background-color="#545c64"
                     text-color="#fff">
                <el-menu-item>
                       <span style="font:16px 黑体;margin-left: -18px;">
                            <span :class="zelin">
                                泽林
                            </span>
                            后台管理系统
                        </span>
                </el-menu-item>
            </el-menu>
            <el-menu
                    :collapse-transition="false"
                    router
                    :default-active="this.$route.path"
                    class="el-menu-vertical-demo"
                    background-color="#545c64"
                    text-color="#fff"
                    :collapse="isCollapse"
                    active-text-color="#ffd04b">
                <el-submenu :index="index+''" v-for="(menu,index) in menus" :key="index">
                    <template slot="title">
                        <i :class="menu.icon"></i>
                        <span>{{menu.title}}</span>
                    </template>
                    <el-menu-item  style="margin-left: 12px;" v-for="child in menu.children" :index="menu.path + '/' + child.path">
                        <i :class="child.icon"></i>
                        <span slot="title" >{{child.title}}</span>
                    </el-menu-item>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header>
                <span :class="menuClass" @click="changeWidth" style="cursor:pointer"></span>
                <span style="float:right">SpringBoot + Vue + ElementUI前后端分离开发</span>
            </el-header>
            <el-main>

                <router-view/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import menus from "@/api/menu"
    export default {
        name: "Layout",
        data(){
            return {
                menus:menus,
                isCollapse:false,
                menuWidth:'200px',
                menuClass:'el-icon-s-fold',
                zelin:'zelin'
            }
        },
        methods:{
            //1. 切换菜单显示与隐藏样式
            changeWidth(){
                if(this.menuWidth == '200px'){
                    this.isCollapse = true;                     //切换菜单折叠(true:隐藏菜单文字 只显示图标)
                    this.menuClass = 'el-icon-s-unfold';        //点击图标
                    this.menuWidth = '60px';                    //左侧菜单宽度
                    this.zelin = 'zelin';                       //菜单中“泽林”字样的样式
                }else{
                    this.isCollapse = false;                    //切换菜单折叠(true:显示菜单文字及图标)
                    this.menuClass = 'el-icon-s-fold';
                    this.menuWidth = '200px';
                    this.zelin = "zelin2"
                }
            }
        }
    }
</script>

<style scoped>
    .el-header, .el-footer {
        background-color: rgb(84,92,100);
        color: white;
        line-height: 60px;

    }
    .el-menu{
     border-right:0;
    }
    .el-aside {
        background-color: rgb(84,92,100);
        color: #333;
        text-align: center;
        line-height: 10px;
        height: 1500px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        line-height: 10px;
    }
    .zelin{
        font:24px 华文行楷;
        color:#409EFF;
        margin-left: 5px;
    }
    .zelin2{
        font:24px 华文行楷;
        color:#67C23A;
        margin-left: 5px;
    }
</style>